<!--资产申请页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">资产单列表</span>
    <el-button type="primary" style="float:right;margin-top:13px;"
               @click="addApplicationDialogVisible=true"
               >新增申请
    </el-button>
  </div>
  <!-- 领用资产申请弹窗 -->
  <el-dialog title="创建申请单" v-model="addApplicationDialogVisible" style="width:1000px;padding:40px;"
             :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="领用人">
            <el-input readonly></el-input>
<!--            <el-input readonly :value="user.username"></el-input>-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="使用时间">
            <el-date-picker
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                v-model="times"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="领用类型">
            <el-select v-model="addForm.appType" placeholder="请选择">
              <!--            <el-option
                              v-for="item in appTypeOptions"
                              :label="item.label"
                              :value="item.value"
                          />-->
              <!--           下面的待使用字典-->
              <el-option label="入职领用" value="201"></el-option>
              <el-option label="更换领用" value="202"></el-option>
              <el-option label="部门领用" value="203"></el-option>
              <el-option label="其他" value="204"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="领用数量">
            <el-input-number :min="1" :max="1000" v-model="addForm.num"  />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="领用事由">
            <el-input placeholder="请输入" type="textarea" resize="none" :rows="3"
                      v-model="addForm.reason"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input placeholder="请输入" type="textarea" resize="none" :rows="3"
                      v-model="addForm.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="addApplication">确定</el-button>
    </template>
  </el-dialog>

  <!-- 资产申请列表 搜索卡片 -->
  <el-card style="margin: 20px;">
    <el-form style="padding-top:10px;">
      <el-row :gutter="30">
        <el-col :span="5">
          <el-form-item label="资产名">
            <el-input placeholder="请输入资产名" v-model="searchApplication.assetsName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="申请单状态">
            <el-select placeholder="请选择" v-model="searchApplication.status">
<!--              <el-option v-for="item in appOptions" :label="item.label" :value="item.value"></el-option>-->
                            <el-option label="已发起" value="10"></el-option>
                            <el-option label="撤销" value="20"></el-option>
                            <el-option label="审核中" value="30"></el-option>
                            <el-option label="驳回" value="40"></el-option>
                            <el-option label="已通过" value="50"></el-option>
                            <el-option label="待领用" value="60"></el-option>
                            <el-option label="工单结束" value="70"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button style="background-color: #00AEEc;color: #fff;" @click="loadApplication">
              <el-icon>
                <Search/>
              </el-icon>
              <span >搜索</span>
            </el-button>
            <el-button style="background-color: #f0c24c;color: #fff;" @click="resetSearch">
              <el-icon>
                <RefreshRight/>
              </el-icon>
              <span >重置</span>
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <!-- 资产申请表格 -->
  <el-card style="margin:20px">
    <el-table :data="tableData">
      <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" prop="username" label="申请人"></el-table-column>
      <el-table-column align="center" prop="employeeId" label="工号"></el-table-column>
      <el-table-column align="center" prop="department" label="部门"></el-table-column>
      <el-table-column align="center" prop="applyAsset" label="申请资产"></el-table-column>
      <el-table-column align="center" prop="reason" label="申领事由"></el-table-column>
      <el-table-column align="center" prop="auditUsernameList" label="审批人"></el-table-column>
      <el-table-column align="center" prop="startTime" label="使用开始时间"></el-table-column>
      <el-table-column align="center" prop="endTime" label="使用结束时间"></el-table-column>
      <el-table-column align="center" prop="status" label="申请单状态"
                       :formatter="appStatusFormatter"></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <el-button type="primary" size="default" link
                     :disabled="10 != scope.row.status" @click="cancel(scope.row.id)">撤销
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

//定义变量控制创建申请单弹窗是否出现
const addApplicationDialogVisible = ref(false);

//获取当前登录的用户信息
const user = ref(getUser());
//定义数组用来保存新增申请单时显示的审批人(含姓名)
const auditUserOpts = ref([]);
//定义数组用来保存新增申请单时,对应申请人的id,入库使用
const auditUserIdList = ref([]);
//定义加载审批人的方法
const loadAuditUser = () => {

}
onMounted(() => {
  //因为当前登录人的直属领导与上上级是固定的,所以只需要在页面加载完毕时加载一次即可,无需重复请求
  loadAuditUser();
})

//定义数组用来保存申请单的起止时间
const times = ref([]);
//定义对象用来保存申请单的表单数据
const addForm = ref({
  num: '',//申请数量
  reason: '',//用车事由
  remark: ''//备注
});
const appTypeOptions = [];
//定义方法发送新增申请单的请求
const addApplication = () => {
  //准备给后端新增审请单的数据
  addForm.value.startTime = times.value[0];//申请开始时间
  addForm.value.endTime = times.value[1];//申请结束时间
  addForm.value.username = user.value.username;//申请人姓名
  addForm.value.userId = user.value.id;//申请人id
  addForm.value.department = user.department;//申请人部门
  addForm.value.auditUserIdList = auditUserIdList.value;//审批人id集合
  console.log(addForm.value);

  let data = qs.stringify(addForm.value);
  //给后端发新增请求

}
//处理弹窗关闭的方法
const handleClose = () => {
  if (confirm('是否要关闭本弹窗?')) {
    addApplicationDialogVisible.value = false;//关闭弹窗
    times.value = [];//清空时间选择器组件
    addForm.value = {};//清空表单项
    addForm.value.num=0;//将表单项里的数字类型置为0
  }
}


//准备数组用来保存查出来的申请单表格数据
//const tableData = ref([]);

//下面的是假数据
const tableData = ref([
  {username:'李华',employeeId:'F00911',department:'法务部',applyAsset:'Macbook Pro 2023',reason:'换新办公电脑',auditUsernameList:['vampire','mike'],startTime:'2024-4-17 00:00:00',endTime:'2026-4-17 00:00:00',status:10},
  {username:'玛莲妮娜',employeeId:'M00001',department:'人事部',applyAsset:'A4 Paper',reason:'办公用纸',auditUsernameList:['Simon','zooKeeper'],startTime:'2024-6-17 15:00:00',endTime:'',status:50},
  {username:'玛莲妮娜',employeeId:'M00001',department:'人事部',applyAsset:'A4 Paper',reason:'办公用纸',auditUsernameList:['Simon','zooKeeper'],startTime:'2024-6-17 15:00:00',endTime:'',status:50},
  {username:'玛莲妮娜',employeeId:'M00001',department:'人事部',applyAsset:'A4 Paper',reason:'办公用纸',auditUsernameList:['Simon','zooKeeper'],startTime:'2024-6-17 15:00:00',endTime:'',status:50},
]);
//准备对象用来保存搜索条件
const searchApplication = ref({
  employeeName: '',
  assetsName: '',
  status: ''
});
//定义加载申请单的方法
const loadApplication = () => {
  let data = qs.stringify(searchApplication.value);

}

onMounted(() => {
  loadApplication();
})

//定义重置搜索条件的方法
const resetSearch = () => {
  searchApplication.value = {};
  loadApplication();
}

//定义数组用来保存申请单的状态
const appOptions = ref([]);
//一进入页面立即加载申请单
onMounted(() => {
})

//对申请单状态显示内容进行文字转换
const appStatusFormatter = (row, column, cellValue, index) => {
  if (!appOptions.value) {
    return cellValue;
  }
  for (let item of appOptions.value) {
    if (item.value == cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
}

//定义撤销方法
//撤销资产申请
const cancel = (id)=>{

}

</script>

<style scoped>
</style>